<template>
  <div style="width:390px,height:100%">
    <div class="wyearningmain">
      <!-- 页头 -->
      <div class="wyhead">
        <a href="" class="wyhead1" @click="fanh">
          <img src="../assets/img/返回箭头 (1).png" alt="" />
        </a>
        <span class="wyspan1">持仓收益</span>
        <div class="wyhead1">
          <p class="wyhead11">
            <span>持仓总金额（元）</span>
            <img @click="num++" src="../assets/img/闭眼睛（灰色）.png" alt="" id="wyheadimg1" />
            <span class="wyspan2">昨日收益（元）</span>
            <img src="../assets/img/圆圈警示.png" alt="" class="wyheadimg2" />
          </p>
          <p class="wyhead12">
            <span id="wyhead121" v-if="(num%2!=0)">****</span>
            <span v-if="(num%2==0)">{{arr.positionTotal| mess}}</span>
            <span id="wyhead122" v-if="(num%2!=0)">**** </span>
            <span v-if="(num%2==0)">{{arr.YIncome | mess}}</span>
          </p>
        </div>
      </div>
      <!-- 选项 -->
      <div class="wyoptions">
        <ul class="wyoptions1">
          <a href="">
            <li>
              <span>存款</span>
              <span
                >期限多样 本息保障&nbsp;
                <img src="../assets/img/跳转箭头.png" alt="" />
              </span>
            </li>
          </a>
          <a href="">
            <li>
              <span>基金</span>
              <span
                >农银优选基金&nbsp;
                <img src="../assets/img/跳转箭头.png" alt="" />
              </span>
            </li>
          </a>
          <a href="">
            <li>
              <span>理财产品</span>
              <span
                >银行产品值得信赖&nbsp;
                <img src="../assets/img/跳转箭头.png" alt="" />
              </span>
            </li>
          </a>
          <a href="">
            <li>
              <span>债券</span>
              <span
                >投资国债 安全理财&nbsp;
                <img src="../assets/img/跳转箭头.png" alt="" />
              </span>
            </li>
          </a>
        </ul>
      </div>
      <!-- 热门精选 -->
      <div class="wyhottopic">
        <p class="wyhot">热门精选</p>
        <div class="wytopic">
          <div class="wytopic1">
            <p>2.00%</p>
            <p>年利率</p>
          </div>
          <div class="wytopic2">
            <p>2002年"金穗银行多"008...</p>
            <p>4,000元起购 | 存期1年</p>
          </div>
        </div>
        <div class="wytopic">
          <div class="wytopic1">
            <p class="www">1.89%</p>
            <p>七日年化收益率</p>
          </div>
          <div class="wytopic2">
            <p>农银理财"农银时时付"</p>
            <p>4,000元起购 | 存期1年</p>
          </div>
        </div>
        <div class="wytopic">
          <div class="wytopic1">
            <p>2.00%</p>
            <p>年利率</p>
          </div>
          <div class="wytopic2">
            <p>2002年"金穗银行多"008...</p>
            <p>4,000元起购 | 存期1年</p>
          </div>
        </div>
      </div>
      <!-- 温馨提示 -->
      <div class="wyhint">
        <div class="wyhint1">
          温馨提示：<br />
          1、持仓及收益展示您在万荣银行的存款类、理财类、基金类、债务券、外汇类等相关资产持仓金额及收益信息。
          统计范围不限于掌上银行签约账户，所有数据仅供参考,不作为对账依据。如果您有外币资产将会被折算成人民币计算。<br />
          2、如有疑问，请联系我的客服或亲临荣行网点。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { wang } from "../api/earnings";

export default {
  filters: {
    mess (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(2)
    return realVal
  }
},
  data(){
return{
  num:1,
  name:false,
  name1:true,
  arr:[]
}
  },
  methods:{
     fanh(){
     this.$router.push("/All")
    },
    yangji(){
      this.name = true
      this.name1 = false
    },
    fuu(){
      wang({
      
    }).then((res)=>{
        console.log(res.data);
        if (res.code == 200) {
          this.arr= res.data
        }else{
          Dialog({ title: "温馨提示", message: res.msg });
        }
        
    })
  }
},
  created(){
    this.fuu()
    },

    };
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.wyearningmain {
  width: 390px;
  height: 844px;
}
/* 页头 */
.wyhead {
  width: 390px;
  height: 150px;
  background-color: rgba(255, 166, 0, 0.674);
  /* position: fixed; */
}
.wyhead1 {
  margin-left: 50px;
}
.wyhead1 img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: -10px;
  margin-right: 5px;
}
.wyhead a {
  margin-left: 14px;
  color: black;
  font-size: 13px;
}
.wyhead .wyspan1 {
  font-weight: 600;
  margin-left: 128px;
  font-size: 20px;
}
.wyhead1 {
  width: 350px;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin: 40px auto 0;
}
.wyhead11 {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}
.wyhead11 img {
  width: 15px;
  height: 15px;
}
.wyhead11 span:nth-child(1) {
  color: #878787;
  font-size: 14px;
}
#wyheadimg1 {
  margin-left: -60px;
}
.wyhead11 .wyspan2 {
  color: #878787;
  font-size: 12px;
  margin-right: -55px;
}
.wyhead12 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.wyhead12 span:nth-child(1) {
  font-size: 20px;
  font-weight: 600;
  margin-left: 30px;
}
.wyhead12 span:nth-child(2) {
  margin-right: 30px;
}
/* 选项 */
.wyoptions {
  width: 390px;
  height: 280px;
  margin-top: 20px;
  background-color: #e1e1e18d;
}
.wyoptions1 li {
  display: flex;
  justify-content: space-between;
  width: 390px;
  height: 60px;
  line-height: 50px;
  color: black;
  margin: 10px 0;
  background-color: white;
}
.wyoptions1 img {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  margin-top: 5px;
}
.wyoptions1 li span:nth-child(1) {
  font-weight: 600;
  font-size: 16px;
}
.wyoptions1 li span:nth-child(2) {
  font-size: 16px;
  color: #696969;
}
/* 热门精选 */
.wyhottopic {
  background-color: #e1e1e18d;
}
.wyhottopic .hot {
  width: 390px;
  height: 50px;
  background-color: white;
  line-height: 50px;
  font-weight: 600;
  font-size: 18px;
}
.wytopic {
  display: flex;
  justify-content: space-between;
  width: 390px;
  height: 80px;
  background-color: white;
}
.wytopic1 p:nth-child(1) {
  color: red;
  font-size: 22px;
  margin-left: 6px;
}
.wytopic1 p:nth-child(2) {
  font-size: 16px;
  color: #696969;
  margin-left: 6px;
}
.wytopic2 p:nth-child(1) {
  margin-right: 6px;
  font-size: 18px;
}
.wytopic2 p:nth-child(2) {
  margin-top: 5px;
  color: #696969;
  font-size: 14px;
}
.www {
  margin-left: -1px;
}
/* 温馨提示 */
.wyhint {
  width: 390px;
  height: 170px;
  background-color: #e1e1e18d;
}
.wyhint1 {
  font-size: 14px;
  color: #878787;
  line-height: 25px;
}
</style>